<template>
    <div>
        <div>
            <vue-particles
                    color="#555"
                    :particleOpacity="0.7"
                    :particlesNumber="150"
                    shapeType="circle"
                    :particleSize="4"
                    linesColor="#555"
                    :linesWidth="1"
                    :lineLinked="true"
                    :lineOpacity="0.4"
                    :linesDistance="150"
                    :moveSpeed="2"
                    :hoverEffect="true"
                    hoverMode="grab"
                    :clickEffect="false"
                    clickMode="push"
                    class="lizi"
            />
        </div>
        <div id="login-container">
            <h3 class="title">
                找回密码
            </h3>
            <el-form ref="forgetFormRef" :rules="forgetFormRules" label-width="80px" :model="forgetForm">
                <el-form-item prop="account">
                    <el-input v-model="forgetForm.account" prefix-icon="iconfont icon-user"
                              placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="forgetForm.password" prefix-icon="iconfont icon-3702mima"
                              type="password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="repassword">
                    <el-input v-model="forgetForm.repassword" prefix-icon="iconfont icon-3702mima"
                              type="password" show-password placeholder="请输入确认密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="identity" clearable placeholder="请选择身份">
                        <el-option
                                v-for="item in options"
                                :key="item.identity"
                                :label="item.label"
                                :value="item.identity">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="contact">
                    <el-input v-model="forgetForm.contact" prefix-icon="el-icon-phone"
                              placeholder="请输入联系方式"></el-input>
                </el-form-item>
                <el-form-item class="button">
                    <el-button type="primary" @click="findPassword">确定</el-button>
                    <el-button type="primary" @click="toLogin">返回登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            // 验证手机号的规则
            var checkMobile = (rule, value, callback) => {
                // 验证手机号的正则表达式
                const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
                if (regMobile.test(value)) {
                    return callback()
                }
                callback(new Error('请输入合法的手机号'))
            }
            //验证密码是否一致
            var checkPassword = (rule, value, callback) => {
                if (value !== this.forgetForm.password) {
                    callback(new Error('两次密码不一致'))
                } else {
                    return callback()
                }
            }
            return {
                forgetForm: {
                    account: '',
                    password: '',
                    repassword: '',
                    contact: ''
                },
                options: [{
                    identity: 'submitter',
                    label: '上报员'
                }, {
                    identity: 'buyer',
                    label: '采购员'
                }, {
                    identity: 'manufacturer',
                    label: '厂家'
                }],
                identity: '',
                //这是表单的验证规则对象
                forgetFormRules: {
                    account: [{required: true, message: '请输入登录账号', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    repassword: [
                        {required: true, message: '请输入确认密码', trigger: 'blur'},
                        {validator: checkPassword, trigger: 'blur'}
                    ],
                    contact: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: checkMobile, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            toLogin() {
                this.$router.push('/login')
            },
            findPassword() {
                this.$refs.forgetFormRef.validate(async valid => {
                    if (!valid) return;
                    var result;
                    //发起请求
                    if (this.identity == 'submitter') {
                        result = await this.$http.put('user/submitter/forgetPassword', this.forgetForm)
                    } else if (this.identity == 'manufacturer') {
                        result = await this.$http.put('user/manufacturer/forgetPassword', this.forgetForm)
                    } else if (this.identity == 'buyer') {
                        result = await this.$http.put('user/buyer/forgetPassword', this.forgetForm)
                    } else {
                        return this.$message.error("请选择身份！！！")
                    }
                    if (result.data.status != 200) {
                        this.$message.error("身份信息验证失败，请检查！！！")
                    } else {
                        this.$router.push('/login')
                        this.$message.success("密码修改成功！！！")
                    }
                })
            }
        }
    };
</script>

<style scoped>
    body {
        width: 100%;
        margin: 0;
        background-color: rgb(239, 239, 239);
    }

    .lizi {
        position: fixed;
        top: 0;
        width: 100%;
    }

    #login-container {
        width: 380px;
        height: 450px;
        background: #e5e9f2;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -220px;
        margin-top: -170px;
        border-radius: 5px;
        padding-top: 40px;
        padding-right: 40px;
    }

    .title {
        margin-top: 0px;
        margin-left: 160px;
        margin-bottom: 30px;
        height: 10px;
        color: cornflowerblue;
    }

    .button {
        margin-left: 50px;
    }
</style>

